---
title: "Install Tailwind CSS with Laravel"
description: "Setting up Tailwind CSS in a Laravel project."
tool: Laravel Mix
---

```preval installation
tool: Laravel
reference:
  name: the Laravel Installer
  link: https://laravel.com/docs/8.x#the-laravel-installer
script: laravel new
npmInstall: true
```

---

```preval setup
version: latest
```

```preval configuration
postcss: false
types:
  - Blade templates
  - JavaScript components
purge:
  - ./resources/**/*.blade.php
  - ./resources/**/*.js
  - ./resources/**/*.vue
```

### Configure Tailwind with Laravel Mix

In your `webpack.mix.js`, add `tailwindcss` as a PostCSS plugin:

```diff-js
  // webpack.mix.js
  mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
+     require("tailwindcss"),
    ]);
```

```preval include
tool: Laravel
file: ./resources/css/app.css
```

Next, import your stylesheet in your main Blade layout (commonly `resources/views/layouts/app.blade.php` or similar) and add the responsive viewport meta tag if it's not already present:

```diff-html
  <!doctype html>
  <head>
    <!-- ... --->
+   <meta charset="UTF-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  </head>
  <!-- ... --->
```

---

```preval finish
scripts:
  - npm run watch
  - npm run dev
  - npm run prod
```

